<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search mb-10">
        <el-col :span="24" class="breadcrumb-container input-val-box mb-10">
          <el-input v-model="editForm.book_name" placeholder="填写书名" size="small" class="w-200 mr-10"></el-input>
          <el-input v-model="editForm.code" placeholder="填写条形码" size="small" class="w-200 mr-10"></el-input>
          <el-button type="primary" size="small" @click="searchFn"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          <download type="mybook"></download>
        </el-col>
        <el-col :span="24" class="breadcrumb-container input-val-box">
          <el-radio-group v-model="editForm.status" @change="tabList" size="small">
            <el-radio-button :label="0">申请中({{ tabNumer[0] }})</el-radio-button>
            <el-radio-button :label="1">待还书({{ tabNumer[1] }})</el-radio-button>
            <el-radio-button :label="2">已还书({{ tabNumer[2] }})</el-radio-button>
          </el-radio-group>
        </el-col>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
            ref="multipleTable"
            :data="arryList"
            :stripe="tableStyle.tableStripe"
            :border="tableStyle.tableBorder"
            tooltip-effect="dark"
            style="width: 100%"
            header-cell-class-name="table-text-c"
            cell-class-name="table-text-c"
            @selection-change="handleSelectionChange">
            <el-table-column
              prop="book_name"
              label="图书名称">
              <template slot-scope="scope">
                <span>{{ scope.row.book.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="作者"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.book.editor }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="类目"
              width="100">
              <template slot-scope="scope">
                <span>{{ scope.row.book.bookCatName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="code"
              label="条形码"
              width="200">
            </el-table-column>
            <el-table-column
              label="借阅人员">
              <template slot-scope="scope">
                <span>{{ scope.row.examine.realname }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="create_time"
              :label="editForm.status==0?'申请时间':'借出时间'"
              width="110">
              <template slot-scope="scope">
                <span v-show="editForm.status==0">{{ scope.row.create_time }}</span>
                <span v-show="editForm.status!==0">{{ scope.row.examine_time }}</span>
              </template>

            </el-table-column>
            <el-table-column
              prop="return_time"
              label="预还时间"
              width="110">
              <template slot-scope="scope">
                <span
                  :class="Date.parse(scope.row.return_time) > new Date()?'':'redColor'">{{
                    scope.row.return_time
                  }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="actual_return_time"
              label="实际还书时间"
              width="110"
              v-if="editForm.status==2"
              key="1">
            </el-table-column>
            <el-table-column
              label="图书状态"
              width="80">
              <template slot-scope="scope">
                <span v-show="editForm.status==0">申请中</span>
                <span v-show="editForm.status==1">待还书</span>
                <span v-show="editForm.status==2">已归还</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import download from '@/components/common/download'
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      radio1: 1,
      // 设置table样式
      tableStyle: tableoption,
      editLoading: false, // 编辑界面按键缓存
      editForm: {
        book_name: '', // 	字符串 	必填 	1 	- 	名称
        code: '', // 	字符串 	必填 	1 	- 	条码
        status: 0, // 	字符串 	必填 	1 	- 	状态0申请中1待归还2已归还
        p: '' //
      }, // 编辑界面数据
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      tabNumer: []
    }
  },
  components: {
    download
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    this.editForm.user_id = this.userInfo.id
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      this.editForm.p = this.page.pageindex
      this.$post(this.api.admin_read_index, this.editForm).then((response) => {
        if (response.code === 0) {
          // create_time
          for (let i in response.list.data) {
            response.list.data[i].create_time = response.list.data[i].create_time.split(' ')[0]
            if (this.editForm.status !== 0) {
              response.list.data[i].examine_time = response.list.data[i].examine_time.split(' ')[0]
            }
            if (this.editForm.status === 2) {
              response.list.data[i].actual_return_time = response.list.data[i].actual_return_time.split(' ')[0]
            }
          }
          this.arryList = response.list.data
          this.page.total = response.list.total
          this.tabNumer = response.number
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    tabList() {
      //  radio1
      this.page.pageindex = 1
      this.arryList = []
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.arryList = []
      this.InitFn()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    searchFn() {
      this.page.pageindex = 1
      this.arryList = []
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.InitFn()
    }
  },
  mounted() {
  }
}
</script>
